<template>
  <div class="container" @click="handleClick">
    <div style="border-radius: 1.5vw"><img :src="icon" style="width: 8vw;margin:0 15px;"></div>
    <div class="left-container" style="flex: 1; border-radius: 1.5vw">
      <div class="flex-c" style="align-items: flex-start">
        <div v-text="payment" class="payment"></div>
        <div v-text="tip" class="tip" style="display: none"></div>
      </div>
      <div style="flex: 1"></div>
      <div>
        <!--<img :src="checkedImg" >-->
        <svg class="icon pic" style="width: 5.3vw;margin-right: 10px; fill: #721fd9" aria-hidden="true">
          <use xlink:href="#icon-gwc_xz"></use>
        </svg>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Public from '@/assets/js/public';

  export default {
    /** kebab-case */
    name: 'item-payment-type',

    data() {
      return {
        paymentType: this.type,
        isChecked: this.checked
      };
    },
    /** 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。
     String/Number/Boolean/Function/Object/Array/Symbol */
    props: {
      icon: {
        required: true,
        type: String
      },
      payment: {
        required: true,
        type: String
      },
      tip: {
        required: true,
        type: String
      },
      checked: {
        required: true,
        type: Boolean
      },
      type: {
        required: true,
        type: String
      }
    },

    components: {},

    methods: {
      getIcon(icon) {
        return Public.ossImg + icon + '.svg';
      },
      handleClick() {
        this.checkItem();
        this.$emit('isChecked', this.paymentType);
      },
      checkItem() {
        this.isChecked = true;
      },
      uncheckItem() {
        this.isChecked = false;
      }

    },
    computed: {
      checkedImg() {
        if (this.isChecked) {
          return this.getIcon('choosed');
        } else {
          return this.getIcon('choose1');
        }
      }
    },
    watch: {
      checked() {
        this.isChecked = this.checked;
      }
    },
    destroyed() {
      console.log('destroyed');
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .flex-r
    flex-x()

  .flex-c
    flex-y()

  .center
    flex-center()

  .divider
    divider()

  .space
    space()
  .container
    width vw(345)
    height vw(45)
    border-radius vw(5)
    background white
    flex-center()
  .payment
    word-big()
  .tip
    word-tip()
    margin-top 1vw

  .left-container
    flex-x()
    bor-b()

</style>
